<template>
  <uni-popup ref="popup" type="bottom" background-color="#ffffff">
    <view class="date-picker-popup">
      <view class="popup-header">
        <view class="header-btn cancel-btn" @click="cancel">取消</view>
        <view class="popup-title">选择日期</view>
        <view class="header-btn confirm-btn" @click="confirm">确定</view>
      </view>
      
      <view class="picker-content">
        <picker-view 
          :value="pickerValue" 
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column>
            <view 
              class="picker-item"
              v-for="(year, index) in years" 
              :key="index"
            >
              {{ year }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view 
              class="picker-item"
              v-for="(month, index) in months" 
              :key="index"
            >
              {{ month }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view 
              class="picker-item"
              v-for="(day, index) in days" 
              :key="index"
            >
              {{ day }}日
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'DatePicker',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    currentDate: {
      type: String,
      default: ''
    },
    minDate: {
      type: String,
      default: ''
    },
    maxDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pickerValue: [0, 0, 0],
      years: [],
      months: [],
      days: [],
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth() + 1,
      selectedDay: new Date().getDate()
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initPicker()
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    }
  },
  mounted() {
    this.initPicker()
  },
  methods: {
    initPicker() {
      this.generateYears()
      this.generateMonths()
      this.generateDays()
      this.setCurrentDate()
    },
    
    generateYears() {
      const currentYear = new Date().getFullYear()
      const minYear = this.minDate ? new Date(this.minDate).getFullYear() : currentYear
      const maxYear = this.maxDate ? new Date(this.maxDate).getFullYear() : currentYear + 10
      
      this.years = []
      for (let i = minYear; i <= maxYear; i++) {
        this.years.push(i)
      }
    },
    
    generateMonths() {
      this.months = []
      for (let i = 1; i <= 12; i++) {
        this.months.push(i)
      }
    },
    
    generateDays() {
      const daysInMonth = new Date(this.selectedYear, this.selectedMonth, 0).getDate()
      this.days = []
      for (let i = 1; i <= daysInMonth; i++) {
        this.days.push(i)
      }
    },
    
    setCurrentDate() {
      const date = this.currentDate ? new Date(this.currentDate) : new Date()
      this.selectedYear = date.getFullYear()
      this.selectedMonth = date.getMonth() + 1
      this.selectedDay = date.getDate()
      
      // 设置picker的默认值
      const yearIndex = this.years.indexOf(this.selectedYear)
      const monthIndex = this.months.indexOf(this.selectedMonth)
      const dayIndex = this.days.indexOf(this.selectedDay)
      
      this.pickerValue = [
        yearIndex >= 0 ? yearIndex : 0,
        monthIndex >= 0 ? monthIndex : 0,
        dayIndex >= 0 ? dayIndex : 0
      ]
    },
    
    bindChange(e) {
      const val = e.detail.value
      this.pickerValue = val
      
      this.selectedYear = this.years[val[0]]
      this.selectedMonth = this.months[val[1]]
      
      // 当年月变化时，重新生成天数
      this.generateDays()
      
      // 确保选中的天数不超过当月天数
      if (val[2] >= this.days.length) {
        this.selectedDay = this.days[this.days.length - 1]
        this.pickerValue[2] = this.days.length - 1
      } else {
        this.selectedDay = this.days[val[2]]
      }
    },
    
    confirm() {
      const selectedDate = `${this.selectedYear}-${String(this.selectedMonth).padStart(2, '0')}-${String(this.selectedDay).padStart(2, '0')}`
      this.$emit('confirm', selectedDate)
      this.close()
    },
    
    cancel() {
      this.$emit('cancel')
      this.close()
    },
    
    close() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.date-picker-popup {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.header-btn {
  font-size: 28rpx;
  padding: 16rpx;
  
  &.cancel-btn {
    color: #8c8c8c;
  }
  
  &.confirm-btn {
    color: #1890ff;
    font-weight: 500;
  }
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
}

.picker-content {
  height: 500rpx;
}

.picker-view {
  width: 100%;
  height: 100%;
}

.picker-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  font-size: 28rpx;
  color: #262626;
}
</style>